import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import {
  useMediaQuery,
  Grid,
  Typography,
  TextField,
  FormControlLabel,
  Switch,
  Button,
  Divider,
} from '@material-ui/core';
import { callPostApi } from 'utils/networking';
import { useDispatch } from 'react-redux';

const useStyles = makeStyles(theme => ({
  inputTitle: {
    fontWeight: 700,
    marginBottom: theme.spacing(1),
  },
  switchTitle: {
    fontWeight: 700,
  },
  titleCta: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
}));

const Security = props => {
  const { className, ...rest } = props;
  const classes = useStyles();
  const dispatch = useDispatch();

  const theme = useTheme();
  const isMd = useMediaQuery(theme.breakpoints.up('md'), {
    defaultMatches: true,
  });

  const [currentPW, setCurrentPW] = useState('');
  const [newPW, setNewPW] = useState('');
  const [repeatPW, setRepeatPW] = useState('');
  const [callbackError, setCallbackError] = useState('');

  const submitNewPassword = () => {
    if (!validPassword(currentPW) || !validPassword(newPW) || !validPassword(repeatPW)) {
      return;
    }

    const param = {
      old_password: currentPW,
      new_password: newPW
    }
    callPostApi('user/update_password', param, dispatch, (data) => {
      console.log('data', data)
      setCallbackError('Successfully updated')
    }, (error) => {
      setCallbackError(error)
    })
  }

  const validPassword = (pw) => {
    return pw && pw.length >= 6
  }

  const validRepeatPassword = (pw) => {
    return pw && pw.length >= 6 && pw === newPW
  }

  return (
    <div className={className} {...rest}>
      <Grid container spacing={isMd ? 4 : 2}>
        <Grid item xs={12}>
          <div className={classes.titleCta}>
            <Typography variant="h6" color="textPrimary">
              Change Password
            </Typography>
          </div>
          <Typography variant="subtitle1" color="error">
            {callbackError}
          </Typography>
        </Grid>
        <Grid item xs={12}>
          <Divider />
        </Grid>
        <Grid item xs={12}>
          <Typography
            variant="subtitle1"
            color="textPrimary"
            className={classes.inputTitle}
          >
            Current password
          </Typography>
          <TextField
            placeholder="Old password"
            variant="outlined"
            size="medium"
            name="fullname"
            fullWidth
            type="password"
            error={!validPassword(currentPW)}
            helperText={currentPW ? (validPassword(currentPW) ? "" : "Invaild Password") : "This filed is required."}
            onChange={e => {
              setCurrentPW(e.target.value)
            }}
          />
        </Grid>
        <Grid item xs={12}>
          <Typography
            variant="subtitle1"
            color="textPrimary"
            className={classes.inputTitle}
          >
            New password
          </Typography>
          <TextField
            placeholder="New password"
            variant="outlined"
            size="medium"
            name="fullname"
            fullWidth
            type="password"
            error={!validPassword(newPW)}
            helperText={newPW ? (validPassword(newPW) ? "" : "Invaild Password") : "This filed is required."}
            onChange={e => {
              setNewPW(e.target.value)
            }}
          />
        </Grid>
        <Grid item xs={12}>
          <Typography
            variant="subtitle1"
            color="textPrimary"
            className={classes.inputTitle}
          >
            Repeat password
          </Typography>
          <TextField
            placeholder="Repeat password"
            variant="outlined"
            size="medium"
            name="fullname"
            fullWidth
            type="password"
            error={!validRepeatPassword(repeatPW)}
            helperText={repeatPW ? (validRepeatPassword(repeatPW) ? "" : "Invaild Password") : "This filed is required."}
            onChange={e => {
              setRepeatPW(e.target.value)
            }}
          />
        </Grid>
        <Grid item xs={12}>
          <Divider />
        </Grid>
        <Grid item container justifyContent="flex-start" xs={12}>
          <Button
            variant="contained"
            type="submit"
            color="primary"
            size="large"
            onClick={e => {
              e.preventDefault();
              submitNewPassword();
            }}
          >
            Submit
          </Button>
        </Grid>
      </Grid>
    </div>
  );
};

Security.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
};

export default Security;
